// 首先需要整体页面加载完毕之后再运行Js  load
// 1、获取元素  委托来做
// 2、利用定时器来控制图片滚动
// 3、图片动，小圆点也跟着动
// 4、手指触摸滑动图片跟着手指动

// 首先需要整体页面加载完毕之后再运行Js  load
window.addEventListener('load', function () {


    // 1、获取元素  委托来做
    var focus = document.querySelector('.focus');
    var ul = focus.children[0];
    var ol = focus.children[1];
    var index = 0;
    var w = focus.offsetWidth;
    // 利用定时器来控制图片滚动
    var timer = setInterval(function () {
        index++;
        var translatex = -index * w;
        // 为了让移动更加顺滑，添加transition
        ul.style.transition = 'all .3s'
        ul.style.transform = 'translateX(' + translatex + 'px)';

    }, 2000)

    // 过渡后的判断，这里的目的是解决当index》=最后一张轮播图的时候，会出现空白
    // 所以当index》=3的时候，重新给index赋值，再计算ul应该移动的位置
    // 注意，这里是不需要过渡效果的
    ul.addEventListener('transitionend', function () {
        if (index >=3) {
            index = 0;
            var translatex = -index * w;
            // 为了让移动更加顺滑，添加transition
            ul.style.transition = 'none';
            ul.style.transform = 'translateX(' + translatex + 'px)';
        } else if (index < 0) {
            index = 2;
            var translatex = -index * w;
            // 为了让移动更加顺滑，添加transition
            ul.style.transition = 'none'
            ul.style.transform = 'translateX(' + translatex + 'px)';
        }


        // 图片动，小圆点也跟着动
        // 这里是获取带有current类名的ol的儿子
        ol.querySelector('.current').classList.remove('current');
        // 给当前的ol的孩子添加current
        ol.children[index].classList.add('current');
    })

    // 4、手指触摸滑动图片跟着手指动
    // 手指开始的位置
    var startX = 0;
    // 移动的距离
    var moveX = 0;
    var flag = false;
    ul.addEventListener('touchstart', function (e) {
        startX = e.targetTouches[0].pageX;
        clearInterval(timer);
        flag = true;

    })
    ul.addEventListener('touchmove', function (e) {

        //手指 移动的距离等于移动后的位置减去开始的位置
        moveX = e.targetTouches[0].pageX - startX;
        // 图片移动的距离等于图片原本的位置加上手指移动的距离
        var translatex = -index * w + moveX;
        // 此时过渡停止，手托移动
        ul.style.transition = 'none';
        ul.style.transform = ' translateX(' + translatex + 'px)';
        e.preventDefault();
        // 阻止默认行为
    })

    ul.addEventListener('touchend', function () {
        if (flag) {
            flag = false;
            if (Math.abs(moveX) > 50) {
                if (moveX > 0) {
                    index--;
                } else {
                    index++;
                }

                var translatex = -index * w;
                ul.style.transition = 'all .3s';
                ul.style.transform = 'translateX(' + translatex + 'px)';

            } else {
                var translatex = -index * w;
                // 为了让移动更加顺滑，添加transition
                ul.style.transition = 'all .1s'
                ul.style.transform = 'translateX(' + translatex + 'px)';
            }
        }
        // 手放开之后定时器重新打开
        clearInterval(timer);
        timer = setInterval(function () {
            index++;
            var translatex = -index * w;
            // 为了让移动更加顺滑，添加transition
            ul.style.transition = 'all .3s'
            ul.style.transform = 'translateX(' + translatex + 'px)';

        }, 2000)

    })
    // 返回顶部模块制作
    var goBack = document.querySelector('.goBack ')
    var nav = document.querySelector('nav');


    window.addEventListener('scroll', function () {
        if (window.pageYOffset > nav.offsetTop) {
            goBack.style.display = 'block';

        } else {
            goBack.style.display = 'none';
        }

        goBack.addEventListener('click', function () {
            window.scroll(0, 0);
        })
    })
   
   
   
   
   
   
//     window.addEventListener('scroll', function () {
//         if (window.pageYOffset >= nav.offsetTop) {
//             goBack.style.display = 'block';

//         } else {
//             goBack.style.display = 'none';
//         }
        

//         goBack.addEventListener('click', function () {
//             window.scroll(0,0)
//         })
// })




// 最大括号

})